<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div style="height: 300px; width: 300px; border: 1px solid; overflow-y: auto">
      <div style="position: relative" class="container">
        The present <span class="hl" style="background-color: red">invention</span> helps eliminate any phobia's or fears associated with using the
        phone.A common fear of using public phones for example is that it is used by a number of people everyday. Because the phone requires the user
        <span class="hl" style="background-color: blue">to</span> place the handset <span class="hl" style="background-color: blue">to</span> the
        users ear and mouth, bacteria and germs can easily be transmitted <span class="hl" style="background-color: blue">to</span> the handset and
        eventually <span class="hl" style="background-color: blue">to</span> the next user.
        <span class="hl" style="background-color: blue">To</span> prevent this from occurring, a sponge soaked in disinfectant is placed on the holder
        of the phone handset. After every use, the disinfectant sterilizes the phone handset killing common germs and bacteria that can originate from
        the user. This ensures that the phone <span class="hl" style="background-color: green">handset</span> is safe for use for the next user.
      </div>
    </div>
    <script src="./htmlReplacer.preview.js"></script>
    <script type="text/javascript">
      var map = htmlReplacer.highdense(document.querySelector('.container'), 'hl')
      console.log(map)
    </script>
  </body>
</html>
